@use "sass:math";
* {
  box-sizing: border-box;
}
html {
  overflow: hidden;
}
body {
  perspective: 2000px;
  background: #000;
}
.ring {
  width: 100vw;
  height: 100vh;
  transform-style: preserve-3d;
  // transform: rotateX(326deg);
  img {
    position: absolute;
    $imgWidth: 300px;
    $imgHeight: 400px;
    width: $imgWidth;
    height: $imgHeight;
    left: 50%;
    top: 50%;
    margin-left: -$imgWidth / 2;
    margin-top: -$imgHeight / 2;
    $n: 10;
    $pDeg: 360deg / $n;
    $r: 500px;
    backface-visibility: hidden;
    opacity: 0.5;
    transition: 0.5s;
    &:hover {
      opacity: 1;
    }
    // transform: translate3d(0, 0, -500px);
    @for $i from 1 through $n {
      &:nth-child(#{$i}) {
        $deg: $pDeg * ($i - 1);
        $x: math.sin($deg) * $r;
        $z: math.cos($deg) * $r;
        transform: translate3d($x, 0, $z) rotateY(180deg + $deg);
      }
    }
  }
}
